<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
            <div>
                <span><svg-icon icon-class="ranking"></svg-icon>本周药品排行</span>
            </div>
        </template>
        <el-card class="box-card" v-for="(drug, index) in drugs" :key="index" style="height: 50px; padding: 0 0 0 0;">
            <div slot="header" class="clearfix">
                <span>{{ index + 1 }}</span> <span style="margin-left: 30px;">{{ drug.medicineName }}</span><span
                    style="margin-left: 30px;">编号：{{ drug.medicineId }}</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="handlerClick(drug)">添加</el-button>
            </div>
        </el-card>
    </el-card>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, ref, onMounted } from 'vue'
import request from '../../utils/request';
// 接收事件
const $emit = defineEmits(['my-event'])
const msg = ref('hello vue!')
const drugs =ref ( [])
const props = defineProps({
    name: {
        type: String,
        default: '',
    },
})
// 传输值 从
const namedd = ref("狗")
const testValue = (datas) => {
    console.log(datas);

}
// 改变组件内需要传输的值
const handlerClick = (vakued) => {
    namedd.value = vakued;
    $emit('my-event', namedd)
}
const p = {
    "curentPage":1,
    "size":10
}
onMounted( async()=>{
    const res = await request({
    url: '/jwkMedicine/ranking',
    method: 'post',
    data:p
  }
  )
  drugs.value = res.data;
})
</script>

<style scoped>
.box-card {
    margin-bottom: 10px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}
</style>